import { RectNode, RectNodeModel, h } from '@logicflow/core';

class BreakerModel extends RectNodeModel {
  initNodeData(data: any): void {
    super.initNodeData(data);
  }

  getNodeStyle(): {
    [x: string]: any;
    fill?: string | undefined;
    stroke?: string | undefined;
    strokeWidth?: number | undefined;
  } {
    const style = super.getNodeStyle();
    style.fill = 'transparent';
    style.stroke = 'transparent';
    return style;
  }
}

class BreakerView extends RectNode {
  getIcon() {
    const {
      x,
      y,
      properties: { icon, open },
      width,
      height,
    } = this.props.model;
    console.log('open', open);

    return h('image', {
      width,
      height,
      x: x - width / 2 - 10,
      y: y - height / 2,
      href:
        icon ||
        '',
    });
  }

  /**
   * 完全自定义节点外观方法
   */
  getShape() {
    const { model } = this.props;
    const { x, y, width, height } = model;
    const style = model.getNodeStyle();
    return h('g', {}, [
      h('rect', {
        ...style,
        x: x - width / 2,
        y: y - height / 2,
        width,
        height,
      }),
      this.getIcon(),
    ]);
  }
}

export default {
  type: 'Breaker',
  view: BreakerView,
  model: BreakerModel,
};
